<template>
  <div>
    <div>
      <el-form class="search" :inline="true" :model="formInline" label-width="100px">
        <el-form-item label="操作类：" >
          <el-input placeholder="请输入操作类" v-model="formInline.reqClass"></el-input>
        </el-form-item>
        <el-form-item label="操作方法：" >
          <el-input placeholder="请输入操作方法" v-model="formInline.reqMethod"></el-input>
        </el-form-item>
        <div class="searchBtnPart">
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type="primary" icon="el-icon-search" @click="exportExcel">导出</el-button>
        </div>
      </el-form>
    </div>
    <div>
      <el-table border class="table" :data="tableData" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="reqClass" label="操作类" width="230"></el-table-column>
        <el-table-column prop="reqMethod" label="操作方法" width="180"></el-table-column>
        <el-table-column prop="resCode" label="状态码"></el-table-column>
        <el-table-column prop="reqIp" label="请求IP"></el-table-column>
        <el-table-column prop="ts" label="时间戳"></el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination background
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     :page-sizes="[10, 20, 50, 100]"
                     :current-page="page.current"
                     :page-size="page.size"
                     :total="page.total"
                     layout="total, sizes, prev, pager, next, jumper"
                     ></el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Page',
  data() {
    return {
      tableData: [],
      formInline: {
        reqClass: null,
        reqMethod: null,
      },
      page: {
        size: 10,
        current: 1,
        total: 0,
      },
    }
  }
  ,created() {
    // 请求数据
    this.getData();
  }
  ,methods: {
    async getData(){
      let param = {
        ...this.page,
        ...this.formInline
      };
      let res = await this.$http.post("/log/controller/page", param);
      if(res.code === 1){
        this.tableData = res.data.list;
        this.page = res.data.page;
      }
    },
    async downloadFile(){
      let param = {
        ...this.formInline
      };
      await this.$http.postDownload("/log/controller/page/excel", param);
    },
    currentChange(e) {
      this.page.current = e;
      this.getData();
    },
    sizeChange(e) {
      this.page.size = e;
      this.getData();
    },
    search(){
      this.getData();
    },
    exportExcel(){
      this.downloadFile();
    },
  }

}

</script>

<style lang="less">
.search{
  position: relative;
}
.searchBtnPart {
  position: absolute;
  right: 50px;
  bottom: 20px;
}
.page{
  margin-top:10px;
  text-align: center;
}
</style>
